Angular Application সেটআপ (Setting Up Angular Application)

Angular একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা SPA (Single Page Application) তৈরি করার জন্য ব্যবহৃত হয়। Angular অ্যাপ্লিকেশন তৈরি করতে প্রথমে একটি প্রজেক্ট সেটআপ করা প্রয়োজন। নিচে Angular অ্যাপ্লিকেশন সেটআপের ধাপগুলো বিস্তারিতভাবে আলোচনা করা হলো।

সিস্টেম রিকোয়ারমেন্টস

Angular অ্যাপ্লিকেশন তৈরি করার জন্য নিচের সফটওয়্যারগুলো ইনস্টল থাকা আবশ্যক:

• Node.js: Angular CLI এবং ডিপেনডেন্সি ম্যানেজমেন্টের জন্য।
• npm: Node.js এর প্যাকেজ ম্যানেজার।
• Angular CLI: Angular অ্যাপ্লিকেশন তৈরি এবং পরিচালনার জন্য।
• Code Editor: Visual Studio Code সুপারিশকৃত।

Step 1: Node.js এবং npm ইনস্টল

Node.js ডাউনলোড করুন এবং ইন্সটল করুন Node.js অফিসিয়াল ওয়েবসাইট থেকে। ইনস্টল করার পর নিশ্চিত করুন যে Node.js এবং npm সঠিকভাবে ইন্সটল হয়েছে:

node -v
npm -v

উপরের কমান্ড দুটি চালানোর পর যথাক্রমে Node.js এবং npm এর সংস্করণ প্রদর্শিত হবে।

Step 2: Angular CLI ইনস্টল

Angular CLI ইনস্টল করতে নিচের কমান্ডটি চালান:

npm install -g @angular/cli

ইনস্টলেশন সফল হলে CLI এর সংস্করণ চেক করুন:

ng version

Step 3: নতুন Angular প্রজেক্ট তৈরি

Angular অ্যাপ্লিকেশন তৈরি করতে CLI ব্যবহার করে নিচের কমান্ডটি চালান:

ng new my-angular-app

এটি চালানোর পর আপনাকে কিছু প্রশ্ন করা হবে:

• Would you like to add Angular routing?: রাউটিং প্রয়োজন হলে Yes নির্বাচন করুন।
• Which stylesheet format would you like to use?: পছন্দ অনুযায়ী CSS, SCSS, বা অন্য কোনো ফরম্যাট নির্বাচন করুন।

এরপর একটি নতুন ফোল্ডারে প্রজেক্ট ফাইলগুলো তৈরি হবে।

Step 4: প্রজেক্ট ডিরেক্টরিতে প্রবেশ

নতুন তৈরি করা প্রজেক্ট ডিরেক্টরিতে প্রবেশ করুন:

cd my-angular-app

Step 5: অ্যাপ চালানো

Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি চালান:

ng serve

ডিফল্টভাবে অ্যাপটি http://localhost:4200 ঠিকানায় চালু হবে। আপনার ব্রাউজারে এই ঠিকানায় গিয়ে অ্যাপটি দেখতে পারবেন।

Step 6: ফাইল স্ট্রাকচার বোঝা

Angular প্রজেক্টের প্রধান ফোল্ডার এবং ফাইলগুলো:

• src/app: অ্যাপ্লিকেশনের মূল কোড।
• src/index.html: অ্যাপের এন্ট্রি পয়েন্ট।
• src/main.ts: অ্যাপ্লিকেশনের মেইন ফাইল।
• angular.json: অ্যাপের কনফিগারেশন ফাইল।
• package.json: npm ডিপেনডেন্সির তথ্য।

Step 7: নতুন কম্পোনেন্ট তৈরি করা

Angular অ্যাপে নতুন Component যোগ করতে CLI ব্যবহার করুন:

ng generate component component-name

এটি src/app ফোল্ডারে নতুন একটি কম্পোনেন্ট তৈরি করবে।

Step 8: ডিপেনডেন্সি ইনস্টল

আপনার অ্যাপ্লিকেশনে প্রয়োজনীয় লাইব্রেরি যোগ করতে npm ব্যবহার করুন। উদাহরণস্বরূপ, Bootstrap ইন্সটল করতে:

npm install bootstrap

এরপর angular.json ফাইলে Bootstrap যোগ করুন:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Step 9: প্রজেক্ট বিল্ড এবং ডিপ্লয়

প্রজেক্ট তৈরি হয়ে গেলে সেটি প্রোডাকশনে ডিপ্লয়ের জন্য বিল্ড করুন:

ng build --prod

এটি dist/ ফোল্ডারে প্রোডাকশন-রেডি ফাইল তৈরি করবে, যা সার্ভারে আপলোড করা যায়।

সারাংশ

Angular অ্যাপ্লিকেশন সেটআপ করা খুবই সহজ এবং CLI ব্যবহার করে দ্রুত একটি প্রজেক্ট তৈরি করা যায়। সঠিকভাবে Node.js, Angular CLI, এবং প্রয়োজনীয় ডিপেনডেন্সি ইন্সটল করার পর আপনি সহজেই Angular এর শক্তিশালী ফিচার ব্যবহার করে অ্যাপ তৈরি শুরু করতে পারবেন।

Angular CLI (Command Line Interface) Angular অ্যাপ্লিকেশন তৈরি এবং পরিচালনার জন্য একটি শক্তিশালী টুল। এটি ব্যবহার করে দ্রুত Angular প্রজেক্ট তৈরি করা, নতুন কম্পোনেন্ট যোগ করা, বিল্ড এবং ডিপ্লয়মেন্ট করা যায়। নিচে Angular CLI ইন্সটল এবং প্রথম প্রজেক্ট তৈরির ধাপগুলো দেওয়া হলো।

Angular CLI ইন্সটল

প্রাথমিক প্রস্তুতি

Angular CLI ইন্সটল করার আগে Node.js এবং npm ইন্সটল করতে হবে। এগুলো Angular CLI-এর ডিপেনডেন্সি হিসেবে কাজ করে।

Step 1: Node.js ইন্সটল করা

Node.js ইন্সটল করুন Node.js অফিসিয়াল ওয়েবসাইট থেকে। ইন্সটলেশনের পর নিশ্চিত করুন যে Node.js এবং npm সঠিকভাবে কাজ করছে:

node -v
npm -v

উপরের কমান্ড দুটি যথাক্রমে Node.js এবং npm-এর সংস্করণ দেখাবে।

Step 2: Angular CLI ইন্সটল করা

Angular CLI গ্লোবালি ইন্সটল করতে নিচের কমান্ডটি চালান:

npm install -g @angular/cli

ইন্সটলেশন সফল হলে Angular CLI-এর সংস্করণ চেক করতে:

ng version

প্রথম প্রজেক্ট তৈরি করা

Step 1: নতুন Angular প্রজেক্ট তৈরি

Angular CLI ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করতে:

ng new my-angular-app

এটি চালানোর পর CLI আপনাকে নিচের বিষয়গুলোতে প্রশ্ন করবে:

• Would you like to add Angular routing?
  যদি অ্যাপ্লিকেশনে রাউটিং প্রয়োজন হয়, তাহলে Yes নির্বাচন করুন।
• Which stylesheet format would you like to use?
  পছন্দমতো CSS, SCSS, বা অন্য কোনো স্টাইল ফরম্যাট নির্বাচন করুন।

এটি একটি নতুন ফোল্ডারে Angular প্রজেক্টের জন্য প্রয়োজনীয় ফাইল এবং ডিপেনডেন্সি সেটআপ করবে।

Step 2: প্রজেক্ট ডিরেক্টরিতে প্রবেশ

প্রজেক্ট ডিরেক্টরিতে যান:

cd my-angular-app

Step 3: অ্যাপ চালানো

Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি একটি ডেভেলপমেন্ট সার্ভার চালু করবে এবং ডিফল্টভাবে অ্যাপটি http://localhost:4200 এ রান করবে। ব্রাউজারে এই ঠিকানায় গিয়ে অ্যাপটি দেখা যাবে।

Angular প্রজেক্টের স্ট্রাকচার

Angular প্রজেক্ট তৈরি হলে নিচের প্রধান ফোল্ডার এবং ফাইলগুলো পাবেন:

• src/app: অ্যাপ্লিকেশনের মূল কোড থাকে।
• src/index.html: অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট।
• src/main.ts: Angular অ্যাপ্লিকেশনের বুটস্ট্র্যাপিং ফাইল।
• angular.json: অ্যাপ্লিকেশনের কনফিগারেশন ফাইল।
• package.json: npm ডিপেনডেন্সি এবং স্ক্রিপ্ট সংক্রান্ত তথ্য।

নতুন কম্পোনেন্ট তৈরি

Angular CLI ব্যবহার করে সহজেই নতুন Component তৈরি করা যায়। উদাহরণস্বরূপ, header নামে একটি কম্পোনেন্ট তৈরি করতে:

ng generate component header

এটি src/app/header ফোল্ডারে একটি নতুন কম্পোনেন্ট তৈরি করবে।

সারাংশ

Angular CLI ব্যবহার করে দ্রুত এবং সহজে Angular অ্যাপ্লিকেশন তৈরি করা যায়। Node.js এবং Angular CLI সঠিকভাবে ইন্সটল করার পর আপনি প্রথম প্রজেক্ট তৈরি, চালানো এবং প্রয়োজনীয় কম্পোনেন্ট যোগ করতে পারবেন। CLI Angular ডেভেলপমেন্টের প্রক্রিয়াকে আরও কার্যকর এবং সহজ করে তোলে।

Angular প্রজেক্ট তৈরি করলে এটি একটি প্রি-ডিফাইন্ড ফোল্ডার এবং ফাইল স্ট্রাকচার প্রদান করে। এই স্ট্রাকচারটি Angular অ্যাপ্লিকেশনকে মডুলার এবং সংগঠিত রাখে। একটি Angular প্রজেক্টের প্রধান অংশ এবং তাদের ভূমিকা নিচে আলোচনা করা হলো।

Angular Project এর মূল ফোল্ডার এবং ফাইল

root ফোল্ডার (Project Root)

Angular প্রজেক্টের রুট ফোল্ডারে কয়েকটি গুরুত্বপূর্ণ ফাইল এবং ফোল্ডার থাকে। এগুলো অ্যাপ্লিকেশনের সেটআপ এবং কনফিগারেশনের জন্য ব্যবহৃত হয়।

• package.json
  • এই ফাইলে প্রজেক্টের ডিপেনডেন্সি এবং স্ক্রিপ্টের তথ্য থাকে।
  • নতুন লাইব্রেরি যোগ বা মুছতে এই ফাইলটি কাজ করে।

  • উদাহরণ:

    {
      "dependencies": {
        "@angular/core": "^15.0.0",
        "rxjs": "^7.0.0"
      },
      "scripts": {
        "start": "ng serve",
        "build": "ng build"
      }
    }
    

• angular.json
  • এটি প্রজেক্টের মূল কনফিগারেশন ফাইল।
  • এখানে স্টাইল ফাইল, স্ক্রিপ্ট এবং বিল্ড অপশন কনফিগার করা হয়।
• tsconfig.json
  • TypeScript কনফিগারেশন ফাইল।
  • এখানে TypeScript কম্পাইলারের নিয়ম এবং সেটিংস নির্ধারণ করা হয়।
• node_modules
  • প্রজেক্টের সমস্ত ডিপেনডেন্সি এবং প্যাকেজ এখানে থাকে।
  • এটি npm install চালালে স্বয়ংক্রিয়ভাবে তৈরি হয়।

src ফোল্ডার (Source Folder)

src/ ফোল্ডারে অ্যাপ্লিকেশনের প্রধান কোড এবং সম্পদ থাকে। এটি Angular অ্যাপ্লিকেশনের মূল অংশ।

• src/app
  • অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্ট, মডিউল, সার্ভিস এবং রিসোর্স এখানে থাকে।
  • এই ফোল্ডারের মধ্যে প্রতিটি কম্পোনেন্ট একটি ডিরেক্টরি আকারে থাকে।
• src/assets
  • অ্যাপ্লিকেশনের ইমেজ, JSON ফাইল, এবং অন্যান্য স্ট্যাটিক রিসোর্স এখানে থাকে।
• src/environments
  • ডেভেলপমেন্ট এবং প্রোডাকশন পরিবেশের জন্য আলাদা কনফিগারেশন ফাইল থাকে।
  • উদাহরণ: environment.ts (ডেভেলপমেন্ট) এবং environment.prod.ts (প্রোডাকশন)।
• src/index.html
  • এটি অ্যাপ্লিকেশনের প্রধান HTML ফাইল।
  • Angular এখানে app-root সিলেক্টরের মাধ্যমে অ্যাপ্লিকেশন লোড করে।
• src/main.ts
  • অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট।
  • এটি অ্যাপ্লিকেশনের মূল মডিউল (AppModule) কে বুটস্ট্র্যাপ করে।
• src/styles.css
  • অ্যাপ্লিকেশনের গ্লোবাল স্টাইল এখানে লেখা হয়।

app ফোল্ডারের স্ট্রাকচার

src/app ফোল্ডার হলো Angular অ্যাপ্লিকেশনের প্রধান অংশ। এখানে অ্যাপ্লিকেশনের সমস্ত ফিচার এবং লজিক থাকে। উদাহরণ:

• app.module.ts
  • অ্যাপ্লিকেশনের মূল মডিউল।
  • এখানে কম্পোনেন্ট, সার্ভিস এবং মডিউলগুলো আমদানি করা হয়।
• app.component.ts
  • অ্যাপ্লিকেশনের রুট কম্পোনেন্ট।
  • এটি app-root সিলেক্টর ব্যবহার করে অ্যাপের প্রধান ভিউ লোড করে।
• app.component.html
  • রুট কম্পোনেন্টের HTML টেমপ্লেট।
  • এখানে UI সংক্রান্ত কোড লেখা হয়।
• app.component.css
  • রুট কম্পোনেন্টের CSS স্টাইল।

অন্যান্য গুরুত্বপূর্ণ ফাইল

• .editorconfig
  • কোড স্টাইল এবং ফরম্যাটিং সংক্রান্ত নিয়ম।
• .gitignore
  • Git-এর জন্য এমন ফাইল বা ফোল্ডার নির্ধারণ করে যা রিপোজিটরিতে অন্তর্ভুক্ত হবে না।
• README.md
  • Angular প্রজেক্ট সম্পর্কে তথ্য প্রদর্শনের জন্য।

Angular Project Workflow

Angular প্রজেক্টের স্ট্রাকচার অ্যাপ্লিকেশনকে সহজে মডুলার এবং স্কেলেবল করতে সাহায্য করে। প্রধান কাজগুলো হলো:

1. কম্পোনেন্ট তৈরি:
   নতুন ফিচার যোগ করার জন্য নতুন কম্পোনেন্ট তৈরি করুন:

   ng generate component component-name
   

2. মডিউল তৈরি:
   অ্যাপ্লিকেশনের বিভিন্ন অংশ মডিউল আকারে ভাগ করুন:

   ng generate module module-name
   

3. সার্ভিস তৈরি:
   ডেটা হ্যান্ডলিং এবং ব্যাকএন্ড কলের জন্য সার্ভিস তৈরি করুন:

   ng generate service service-name
   

সারাংশ

Angular এর স্ট্রাকচার একটি সুসংগঠিত আর্কিটেকচার প্রদান করে, যা অ্যাপ্লিকেশন তৈরি এবং পরিচালনা সহজ করে তোলে। রুট ফোল্ডারের ফাইলগুলো কনফিগারেশনের জন্য এবং src/app ফোল্ডার অ্যাপ্লিকেশনের ফিচার এবং লজিক রাখার জন্য ব্যবহৃত হয়। এই স্ট্রাকচার মডুলার এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

Angular অ্যাপ্লিকেশন তৈরি করতে Component এবং Module প্রধান ভূমিকা পালন করে। এগুলো Angular অ্যাপ্লিকেশনকে মডুলার, পুনঃব্যবহারযোগ্য এবং স্কেলেবল করে তোলে। নিচে Component এবং Module এর ভূমিকা বিস্তারিতভাবে আলোচনা করা হলো।

Angular Component এর ভূমিকা

Component কী?

Component হলো Angular অ্যাপ্লিকেশনের বিল্ডিং ব্লক। প্রতিটি Component একটি UI (User Interface) অংশকে উপস্থাপন করে। একটি Angular অ্যাপ্লিকেশন মূলত এক বা একাধিক Component এর সমন্বয়ে গঠিত।

Component এর গঠন

একটি Component তিনটি প্রধান অংশ নিয়ে গঠিত:

• Class (TypeScript): এখানে ডেটা এবং লজিক থাকে।
• Template (HTML): এখানে Component এর ভিজুয়াল এলিমেন্ট থাকে।
• Style (CSS/SCSS): Component এর জন্য নির্দিষ্ট স্টাইল।

Component এর ভূমিকা

• UI উপস্থাপন: প্রতিটি Component একটি নির্দিষ্ট UI অংশের প্রতিনিধিত্ব করে।
• পুনঃব্যবহারযোগ্য কোড: Component ব্যবহার করে কোড পুনঃব্যবহারযোগ্য করা যায়।
• State এবং Behavior Management: Component তার নিজস্ব ডেটা (state) এবং ফাংশনালিটি (behavior) পরিচালনা করে।
• Parent এবং Child Communication: Component গুলো একে অপরের সাথে ডেটা এবং ইভেন্ট শেয়ার করতে পারে।

Component তৈরি উদাহরণ

Angular CLI ব্যবহার করে নতুন Component তৈরি করতে:

ng generate component header

এটি src/app/header ফোল্ডারে প্রয়োজনীয় ফাইল তৈরি করবে।

উদাহরণ Component (header.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-header', // HTML-এ ব্যবহৃত ট্যাগ
  templateUrl: './header.component.html', // টেমপ্লেট ফাইল
  styleUrls: ['./header.component.css'] // স্টাইল ফাইল
})
export class HeaderComponent {
  title = 'Header Section'; // ডেটা বা প্রোপার্টি
}

টেমপ্লেট (header.component.html)

<header>
  <h1>{{ title }}</h1>
</header>

Angular Module এর ভূমিকা

Module কী?

Angular-এ Module হলো একটি লজিক্যাল গ্রুপিং, যেখানে কম্পোনেন্ট, ডিরেক্টিভ, পাইপ, এবং সার্ভিস থাকে। প্রতিটি Angular অ্যাপ্লিকেশন একটি root module (AppModule) দিয়ে শুরু হয়, যা app.module.ts ফাইলে থাকে।

Module এর ভূমিকা

• Feature Grouping: অ্যাপ্লিকেশনের বিভিন্ন ফিচার বা ফাংশনালিটি আলাদা মডিউলে ভাগ করা যায়।
• Reusable Architecture: মডিউলগুলো পুনঃব্যবহারযোগ্য এবং স্বাধীনভাবে কাজ করতে পারে।
• Dependency Management: Module অন্যান্য মডিউল এবং সার্ভিসকে ইমপোর্ট এবং এক্সপোর্ট করে।
• Lazy Loading: Module ব্যবহার করে নির্দিষ্ট পেজ বা ফিচার শুধু প্রয়োজন অনুযায়ী লোড করা যায়।

Module এর গঠন

একটি Angular Module মূলত NgModule ডেকোরেটর দিয়ে ডিফাইন করা হয়। এটি অ্যাপ্লিকেশনের কম্পোনেন্ট, ডিরেক্টিভ এবং সার্ভিসের তথ্য সংরক্ষণ করে।

উদাহরণ Module (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent, // রুট কম্পোনেন্ট
    HeaderComponent // নতুন Header Component
  ],
  imports: [
    BrowserModule // ব্রাউজার সংক্রান্ত প্রয়োজনীয় মডিউল
  ],
  providers: [], // সার্ভিস যোগ করা হলে এখানে উল্লেখ করা হয়
  bootstrap: [AppComponent] // রুট কম্পোনেন্ট বুটস্ট্র্যাপ করা
})
export class AppModule { }

Feature Module তৈরি উদাহরণ

Angular CLI দিয়ে নতুন মডিউল তৈরি করতে:

ng generate module feature

এটি src/app/feature ফোল্ডারে একটি নতুন মডিউল তৈরি করবে।

Feature Module (feature.module.ts)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [FeatureComponent], // কম্পোনেন্ট, ডিরেক্টিভ ইত্যাদি
  imports: [CommonModule], // অ্যাঙ্গুলার কমন মডিউল
  exports: [FeatureComponent] // এক্সপোর্ট করা কম্পোনেন্ট
})
export class FeatureModule { }

Component এবং Module এর পার্থক্য

সারাংশ

Component এবং Module Angular অ্যাপ্লিকেশন তৈরির দুটি গুরুত্বপূর্ণ অংশ। Component অ্যাপ্লিকেশনের UI উপস্থাপনের জন্য ব্যবহৃত হয়, যেখানে Module অ্যাপ্লিকেশনের বিভিন্ন ফিচারকে মডুলার আকারে সংগঠিত করে। এই দুটি একসঙ্গে অ্যাপ্লিকেশনকে মডুলার, স্কেলেবল এবং পুনঃব্যবহারযোগ্য করে তোলে।

Google Charts একটি শক্তিশালী JavaScript লাইব্রেরি যা ডেটা ভিজুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Angular অ্যাপ্লিকেশনে Google Charts ব্যবহার করতে angular-google-charts লাইব্রেরি ইন্সটল করা হয়। নিচে Angular প্রজেক্টে angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করার ধাপগুলো বিস্তারিতভাবে আলোচনা করা হলো।

Step 1: Angular প্রজেক্ট তৈরি বা নির্বাচন

প্রথমে একটি Angular প্রজেক্ট তৈরি করুন, যদি আপনার কাছে পূর্বের কোনো প্রজেক্ট থাকে, তাহলে সেটি ব্যবহার করতে পারেন।

• নতুন প্রজেক্ট তৈরি করতে:

ng new google-charts-angular
cd google-charts-angular

Step 2: angular-google-charts ইন্সটল করা

Google Charts এর জন্য Angular wrapper angular-google-charts লাইব্রেরি ইন্সটল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এই কমান্ডটি চলানোর পর angular-google-charts লাইব্রেরি আপনার প্রজেক্টের node_modules ফোল্ডারে ইন্সটল হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন GoogleChartsModule আপনার অ্যাপ্লিকেশনে ব্যবহার করার জন্য মডিউল ফাইলে ইমপোর্ট করতে হবে।

app.module.ts ফাইলে নিচের কোড যোগ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // GoogleChartsModule ইমপোর্ট করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: কম্পোনেন্টে Google Chart ব্যবহার করা

এখন আপনি আপনার কম্পোনেন্টে Google Chart ব্যবহার করতে পারবেন। উদাহরণস্বরূপ, app.component.ts ফাইলে Google Chart এর জন্য ডেটা এবং অপশন সেট করুন।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Google Charts Demo';

  chartType = 'PieChart'; // চার্টের টাইপ
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // চার্টের ডেটা
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: 600,
    height: 400
  }; // চার্টের অপশন
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Step 5: অ্যাপ রান করা

এখন অ্যাপ রান করতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন।

সারাংশ

angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করার মাধ্যমে Angular অ্যাপ্লিকেশনে Google Charts ব্যবহার করা সম্ভব হয়। এটি সহজেই চার্টের টাইপ, ডেটা এবং অপশন কাস্টমাইজ করার সুযোগ দেয়। এই লাইব্রেরি ব্যবহার করে আপনি সহজেই ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।